<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <!--查询-->
        <el-form :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model="searchForm.name"
              type="primary"
              placeholder="请输入名称"
              clearable
              @keyup.enter.native="onSearch"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.accountTypeId" clearable placeholder="选择类型">
              <el-option
                v-for="item in accountTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch"/>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button type="primary" @click="modal.typeCount++">账户类型管理</el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" circle @click="showAddModal"/>
        </div>
      </el-col>
    </el-row>
    <!--分页表格内容-->
    <div>
      <el-table :data="sysPasswordList">
        <el-table-column
          type="index"
          label="序号"/>
        <el-table-column
          prop="accountType.name"
          label="类型"/>
        <el-table-column
          prop="name"
          label="名称"/>
        <el-table-column
          prop="url"
          label="路径"/>
        <el-table-column
          prop="account"
          label="账号"/>
        <el-table-column
          prop="password"
          label="密码"/>
        <el-table-column
          prop="remark"
          label="备注"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditModal(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="showDeleteModal(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <!--增加账户弹窗-->
    <el-dialog :visible.sync="modal.add" title="增加系统账户">
      <el-form label-width="100px">
        <el-form-item label="类型">
          <el-select v-model="pwd.accountTypeId" placeholder="请选择账户类型">
            <el-option
              v-for="item in accountTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="pwd.name"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pwd.url"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="pwd.account"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="pwd.password"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pwd.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="addPwd">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改账户弹窗-->
    <el-dialog :visible.sync="modal.edit" title="修改系统账户">
      <el-form label-width="100px">
        <el-form-item label="类型">
          <el-select v-model="pwd.accountTypeId" placeholder="请选择账户类型">
            <el-option
              v-for="item in accountTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="pwd.name"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pwd.url"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="pwd.account"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="pwd.password"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pwd.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </div>
    </el-dialog>
    <!--账户类型管理弹窗-->
    <sys-account-type :count="modal.typeCount"/>
  </div>
</template>

<script>
import { getSysPwdPage, addSysPwd, getSysType, updateSysPwd, deleteSysPwd } from '../../api/password/password';
import { MessageBox } from 'element-ui';
import SysAccountType from './component/sysAccountType';

export default {
  name: 'SysPassword',
  components: { SysAccountType },
  data() {
    return {
      searchForm: {
        name: '',
        accountTypeId: null
      },
      modal: {
        add: false,
        edit: false,
        typeCount: 0
      },
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      sysPasswordList: [],
      accountTypes: [],
      pwd: {
        'account': null,
        'accountTypeId': null,
        'name': null,
        'password': null,
        'remark': null,
        'url': null
      }
    };
  },
  created() {
    this.getSysPassword();
    this.getType();
  },
  methods: {
    // 搜索
    onSearch() {
      this.page.currentPage = 1;
      this.getSysPassword();
    },
    // 跳转页面
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getSysPassword();
    },
    // 跳转页面
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getSysPassword();
    },
    getSysPassword() {
      getSysPwdPage(this.page.currentPage, this.page.pageSize, this.searchForm)
        .then(response => {
          this.sysPasswordList = response.data.rows;
          this.page.total = response.data.total;
        });
    },
    showAddModal() {
      this.modal.add = true;
      this.getType();
    },
    showEditModal(val) {
      this.pwd = val;
      this.modal.edit = true;
      this.getType();
    },
    showDeleteModal(id) {
      MessageBox.confirm(
        '确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.deletePwd(id);
      });
    },
    closeModal() {
      this.modal.add = false;
      this.modal.edit = false;
      this.pwd = {};
    },

    // 访问后台接口
    getType() {
      getSysType().then(response => {
        this.accountTypes = response.data;
      });
    },
    addPwd() {
      this.modal.add = false;
      addSysPwd(this.pwd).then(response => {
        this.pwd = {};
        this.getSysPassword();
      });
    },
    updatePwd() {
      this.modal.edit = false;
      updateSysPwd(this.pwd.id, this.pwd).then(response => {
        this.pwd = {};
        this.getSysPassword();
      });
    },
    deletePwd(id) {
      deleteSysPwd(id).then(response => {
        this.getSysPassword();
      });
    }
  }
};
</script>

<style scoped>
  .input {
    width: 720px;
    margin-right: 5px;
    float: left;
  }

</style>
